<template>
	<view class="page-fade-in" :style="{opacity: pageOpc}">
		<template v-if="pageOpc">
			<view class="suggest-container">
				<view class="title">{{series}}（{{reportInfo.originalScore}}分）：</view>
				<view class="desc">{{reportInfo.project}}</view>
				<view class="suggest-box flexWrapNo">
					<view class="label">优化建议：</view>{{reportInfo.suggestion	||'-'}}
				</view>
				<view class="imgVideo-box" >
					<view class="label">现场问题图片或视频：</view>
					<view class="upload-box" v-if="reportInfo.problemAttachment!=null">
						<view class="file-item" v-for="(item,index) in reportInfo.problemAttachment.split(',')" :key="index">
							<block v-if="isVideoOrImage(item) == 'video'">
								<video :src="item" object-fit="cover" class="img" ></video>
							</block>
							<block v-else>
								<image :src="item" class="img" @tap.stop="previewImage(item)" mode="aspectFill"></image>
							</block>
						</view>	
					</view>
					<view class="quesheng" v-else>无图片或视频</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				pageOpc:0,
				id:'',
				series:'',
				reportInfo:{},
				fileList:[
					'https://moyu24h-new.oss-cn-chengdu.aliyuncs.com/miniProgramUpload/2024-07-23/17217093681959465.png',
					'https://moyu24h-new.oss-cn-chengdu.aliyuncs.com/miniProgramUpload/2024-07-23/17217093681998023.png',
					'https://moyu24h-new.oss-cn-chengdu.aliyuncs.com/miniProgramUpload/2024-07-23/17217093353199333.mp4',
					'https://moyu24h-new.oss-cn-chengdu.aliyuncs.com/miniProgramUpload/2024-07-23/17217093681959465.png'
				],
			}
		},
		onReady() {
			setTimeout(() => {
				this.pageOpc = 1
			}, 100)
		},
		onLoad(options) {
			console.log(options)
			this.id=options.id
			this.series=options.series
			this.getSuggestion()
		},
		methods:{
			// 判断是视频还是图片
			isVideoOrImage(file) {
				let videoRegex = /(\mp4|\avi|\mkv)$/i
			    let imgRegex = /(\jpg|\jpeg|\png|\gif|\webp)$/i
				if (imgRegex.test(file)) {
					return 'image'
				} else if (videoRegex.test(file)) {
					return 'video'
				} else {
					return 'unknown'
				}
			},
			
			// 获取巡检数据
			getSuggestion(){
				this.$request.get(this.$api.getSuggestion, {
					id:this.id,
				}, {
					isJava: true
				}).then(res => {
					if(res.code==200){
						let {
							data = {}
						} = res;
						this.reportInfo=data
					}
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.suggest-container{
		padding: 28rpx;
		.title{
			color: #fff;
			font-size: 28rpx;
		}
		.desc{
			margin-top: 20rpx;
			color: #fff;
			font-size: 26rpx;
		}
		.label{
			color:rgba(255, 255, 255, .5);
			font-size: 26rpx;
		}
		.suggest-box{
			margin-top: 16rpx;
			color: #fff;
			font-size: 26rpx;	
		}
		.imgVideo-box{
			margin-top: 16rpx;
			.upload-box {
				margin-top: 10rpx;
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				gap: 20rpx;
				.file-item {
					width: 158rpx;
					height: 158rpx;
					position: relative;
					.img {
						display: block;
						width: 100%;
						height: 100%;
					}
				}
			}
		}
		.quesheng{
			margin-top: 16rpx;
			color: rgba(255,255,255,.6);
			font-size: 26rpx;	
		}
	}
</style>